<template>
  <div class="fragment">
    <dl v-for="timeKey in Object.keys(times)" :key="timeKey" class="fragment-item">
      <dt v-for="time in times[timeKey]" :key="time"  class="fragment-item-inner">
        <div class="fragment-item-inner-progress">
            <div class="fragment-item-inner-progress-item" :style="{height:time+'%'}"></div>
        </div>
      </dt>
    </dl>
  </div>
</template>

<script>
export default {
  data(){
    return {
      times:[],
    }
  },
  mounted(){
    this.created(this.times)
  },
  methods:{
    //创建一个由24个小数组组成的大数组
    created(param) {
       let array = [10,34,23,46,60,28]
       for(let i = 0; i<24; i++){
         param.push(array)
        }
        return param
      }
    }
  }
</script>

<style lang="less" scoped>
  .fragment{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
    &-item{
      display: flex;
      width: 22%;
      margin-right: 4%;
      height: 20px;
      margin-bottom: 10px;
      border:1px solid darkseagreen;
      border-radius: 4px;
      // background:linear-gradient(left,#09BB07,#FFF);
      &-inner{
      flex: 1;
      border-right: 1px solid #e5e5e5;
        &-progress{
          width: 100%;
          height: 100%;
          background-color: #f2f2f2;
          position: relative;
          &-item{
            width: 100%;

            background-color: #7eb7f0;
            position: absolute;
            left: 0px;
            bottom: 0px;
            border: 0;
          }
        }
      }
      &-inner:nth-child(6n){
      flex: 1;
      border-right: 0;
      }
    }
   &-item:nth-child(4n){
     margin-right:0;
   }
  }

</style>

